<template>
	<view>
		<view class="bottom-drawer-mask" v-if="showCDrawer" @click="closeDrawer"></view>
		<view class="bottom-drawer" v-if="showCDrawer">
			<view class="drawer-content custom-drawer-content">
				<view class="drawer-role-row">
					<text class="drawer-role-name">{{ agent && agent.title ? agent.title : '' }}</text>
					<image v-if="gender === 'female'" class="drawer-gender-icon" src="/static/g.png" />
					<image v-if="gender === 'male'" class="drawer-gender-icon" src="/static/n.png" />
				</view>
				<view class="drawer-ai-tip">
					<image class="drawer-ai-icon" src="/static/stra111.png" />
					<text class="drawer-ai-text">此形象角色由用户使用AI技术生成</text>
				</view>

				<view class="drawer-hotdance-block">
					<view class="drawer-hotdance-header">
						<image class="drawer-hotdance-icon" src="/static/create_ai_icon.png" />
						<text class="drawer-hotdance-title">换装</text>
					</view>
					<scroll-view class="drawer-hotdance-list-scroll" scroll-x>
						<view class="drawer-hotdance-list">
							<view v-for="(item, idx) in (changeClothes || [])" :key="idx" class="drawer-hotdance-item">
								<image class="drawer-hotdance-item-img" v-if="item && item.headimgurl" :src="item.headimgurl"
									mode="aspectFill" @click="onClothesClick(item, idx)" />
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		showCDrawer: {
			type: Boolean,
			default: false,
		},
		isClothesActive: {
			type: Boolean,
			default: false,
		},
		gender: {
			type: String,
			default: "male",
		},
		agent: {
			type: Object,
			default: () => ({}),
		},
		changeClothes: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			Openingremarks: "简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介",
			introText: "简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介",
			hotDanceList: [
				"/static/dance1.jpg",
				"/static/dance2.jpg",
				"/static/dance3.jpg",
				"/static/dance4.jpg",
				"/static/dance3.jpg",
				"/static/dance4.jpg",
				"/static/dance3.jpg",
				"/static/dance4.jpg",
				"/static/dance3.jpg",
				"/static/dance4.jpg",
			],
		}
	},
	methods: {
		closeDrawer() {
			this.$emit("update:showCDrawer", false);
			if (this.isClothesActive) {
				this.$emit("update:isClothesActive", false);
			}
		},
		onClothesClick(item, idx) {
			this.$emit('clothesClick', item, idx)
		}
	},
}
</script>

<style lang="scss" scoped>
.bottom-drawer-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 9998;
}

.bottom-drawer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: transparent;
	display: flex;
	justify-content: center;
	animation: drawerUp 0.3s;
}

.drawer-content {
	width: 100vw;
	max-width: 750rpx;
	background: #000000;
	border-top-left-radius: 38rpx;
	border-top-right-radius: 38rpx;
	// min-height: 1300rpx;
	padding-bottom: env(safe-area-inset-bottom);
	animation: drawerContentUp 0.3s;
}

@keyframes drawerUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes drawerContentUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

.custom-drawer-content {
	background: #000;
	border-radius: 32rpx 32rpx 0 0;
	display: flex;
	flex-direction: column;
	// align-items: center;
	padding: 46rpx 23rpx;
}

.drawer-role-row {
	display: flex;
	align-items: center;
	margin-bottom: 32rpx;
}

.drawer-role-name {
	color: #fff;
	font-size: 40rpx;
	font-weight: bold;
	margin-right: 18rpx;
}

.drawer-gender-icon {
	width: 38.46rpx;
	height: 38.46rpx;
	margin-right: 12rpx;
}

.drawer-ai-tip {
	width: 228px;
	height: 69.23rpx;
	display: flex;
	align-items: center;
	background: url("/static/bg1111.png") no-repeat center center;
	background-size: cover;
	padding: 0 24rpx;
	margin-bottom: 24rpx;
}

.drawer-ai-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 12rpx;
}

.drawer-ai-text {
	color: rgba(255, 255, 255, 0.85);
	font-size: 23rpx;
	font-weight: 400;
}

.drawer-intro-block {
	background: #232323;
	border-radius: 18rpx;
	padding: 32rpx 30rpx;
	width: 100vw;
	max-width: 703rpx;
	margin: 23rpx auto;
	display: flex;
	flex-direction: column;
}

.drawer-intro-block1 {
	background: #232323;
	border-radius: 18rpx;
	padding: 32rpx 30rpx;
	width: 100vw;
	max-width: 703rpx;
	margin: 23rpx auto 0 auto;
	display: flex;
	flex-direction: column;
}

.drawer-intro-header {
	display: flex;
	align-items: center;
	margin-bottom: 18rpx;
}

.drawer-intro-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 12rpx;
}

.drawer-intro-title {
	color: #bfc2c7;
	font-size: 30rpx;
	font-weight: bold;
}

.drawer-intro-text {
	color: #fff;
	font-size: 26rpx;
	line-height: 1.7;
	word-break: break-all;
}

.drawer-hotdance-block {
	background: #232323;
	border-radius: 18rpx;
	padding: 32rpx 30rpx 28rpx 30rpx;
	width: 100vw;
	max-width: 703rpx;
	display: flex;
	flex-direction: column;
}

.drawer-hotdance-header {
	display: flex;
	align-items: center;
	margin-bottom: 18rpx;
}

.drawer-hotdance-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 12rpx;
}

.drawer-hotdance-title {
	color: #bfc2c7;
	font-size: 30rpx;
	font-weight: bold;
}

.drawer-hotdance-list-scroll {
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
}

.drawer-hotdance-list {
	display: flex;
	flex-direction: row;
	gap: 10rpx;
	margin-top: 8rpx;
	padding-bottom: 8rpx;
}

.drawer-hotdance-item {
	width: 146rpx;
	height: 146rpx;
	border-radius: 12rpx;
	padding: 0;
	background: #111;
	flex-shrink: 0;
	// overflow: hidden;
	object-fit: cover;
	object-position: top;
}

.drawer-hotdance-item-img {
	width: 146rpx;
	height: 146rpx;
	background-size: cover;
	background-position: top center;
	border-radius: 12rpx;
}
</style>